<template>
  <div class="calendar-list">
    <div class="list-header">
      <span>一</span>
      <span>二</span>
      <span>三</span>
      <span>四</span>
      <span>五</span>
      <span>六</span>
      <span>日</span>
    </div>
    <div class="list-body">
      <span v-for="item in lists" :class="styleObj(item)" @click="handleClick(item)">{{ item.date }}</span>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { storeToRefs } from 'pinia'

import { useCalendarStore } from '@/stores/calendar.js'
const store = useCalendarStore()
const { lists, selectedDay } = storeToRefs(store)
const { lastMonth, nextMonth } = store

const styleObj = computed(() => {
  return (item) => {
    return {
      last: item.type !== 'this',
      now: item.date === selectedDay.value && item.type === 'this',
    }
  }
})

const handleClick = (item) => {
  if (item.type === 'last') {
    lastMonth()
  } else if (item.type === 'next') {
    nextMonth()
  }
  selectedDay.value = item.date
}
</script>

<style scoped>
.calendar-list {
  padding: 0 20px;
  height: 400px;
  background-color: #fff;
}
.list-header {
  display: flex;
  gap: 20px;
}
.list-header span {
  cursor: default;
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: 14px;
}
.list-header span:nth-child(6),
.list-header span:nth-child(7) {
  color: red;
}
.list-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 20px;
  text-align: center;
}
.list-body span {
  padding: 7px;
  font-size: 17px;
  font-weight: bold;
  border-radius: 16px;
  cursor: pointer;
}
.list-body span:nth-child(7n),
.list-body span:nth-child(7n + 6) {
  color: red;
}
.last{
    opacity: 0.3;
}
.list-body span:hover{
    background: #4e6ef2;
    color: white;
}
.now{
    border: 2px solid #4e6ef2;
}
</style>
